<template>
    <div class="income-certificate-list">
        <span style="display: flex;">

            <el-button type="primary" @click="$router.push('/main/renshi/renshizhidu/shouruzm/shouruzm')"
                icon="el-icon-back">返回</el-button>
        </span>
        <!-- <router-link class="back-link" to="/main/renshi/renshizhidu/shouruzm/shouruzm">
            <i class="el-icon-arrow-left"></i>
            返回
        </router-link> -->
        <h2>收入证明列表</h2>

        <!-- 搜索表单 -->
        <div class="search-form">
            <el-form :inline="true" :model="queryParams" class="demo-form-inline">
                <el-form-item label="员工姓名">
                    <el-input v-model="queryParams.name" placeholder="请输入员工姓名" clearable></el-input>
                </el-form-item>
                <el-form-item label="部门">
                    <el-input v-model="queryParams.department" placeholder="请输入部门" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleQuery">查询</el-button>
                    <el-button @click="resetQuery">重置</el-button>
                    <el-button type="success" @click="handleAdd">新增</el-button>
                    <el-button type="danger" @click="handleBatchDelete"
                        :disabled="selectedIds.length === 0">批量删除</el-button>
                </el-form-item>
            </el-form>
        </div>

        <!-- 数据表格 -->
        <el-table v-loading="loading" :data="tableData" border style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="id" label="ID" width="80"></el-table-column>
            <el-table-column prop="name" label="员工姓名" width="120"></el-table-column>
            <el-table-column prop="idNumber" label="身份证号码" width="180"></el-table-column>
            <el-table-column prop="department" label="部门" width="120"></el-table-column>
            <el-table-column prop="income" label="税前月收入" width="120"></el-table-column>
            <el-table-column prop="usage" label="用途" width="150"></el-table-column>
            <el-table-column prop="operator" label="经办人" width="100"></el-table-column>
            <el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
            <el-table-column label="操作" width="250" fixed="right">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" @click="handleView(scope.row)">查看</el-button>
                    <el-button size="mini" type="success" @click="handleEdit(scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="pagination-container">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="queryParams.current" :page-sizes="[10, 20, 50, 100]" :page-size="queryParams.size"
                layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import { getIncomeCertificateList, deleteIncomeCertificate, batchDeleteIncomeCertificate } from '@/api/incomeCertificate';
import { Message, MessageBox } from 'element-ui';

export default {
    name: 'IncomeCertificateList',
    data() {
        return {
            // 加载状态
            loading: false,
            // 查询参数
            queryParams: {
                current: 1,
                size: 10,
                name: '',
                department: ''
            },
            // 表格数据
            tableData: [],
            // 总记录数
            total: 0,
            // 选中的行ID
            selectedIds: []
        };
    },
    created() {
        this.getList();
    },
    methods: {
        // 获取列表数据
        async getList() {
            this.loading = true;
            try {
                const response = await getIncomeCertificateList(this.queryParams);
                if (response.data && response.data.code === 200) {
                    const data = response.data.data;
                    this.tableData = data.records;
                    this.total = data.total;
                } else {
                    Message.error(response.data.message || '获取列表失败');
                }
            } catch (error) {
                console.error('获取列表错误：', error);
                Message.error('获取列表失败：' + error.message);
            } finally {
                this.loading = false;
            }
        },

        // 处理查询
        handleQuery() {
            this.queryParams.current = 1;
            this.getList();
        },

        // 重置查询
        resetQuery() {
            this.queryParams = {
                current: 1,
                size: 10,
                name: '',
                department: ''
            };
            this.getList();
        },

        // 处理新增
        handleAdd() {
            this.$router.push('/main/renshi/renshizhidu/shouruzm/shouruzm');
        },

        // 处理查看
        handleView(row) {
            this.$router.push({
                path: '/main/renshi/renshizhidu/shouruzm/shouruzm',
                query: {
                    id: row.id,
                    type: 'view'
                }
            });
        },

        // 处理编辑
        handleEdit(row) {
            this.$router.push({
                path: '/main/renshi/renshizhidu/shouruzm/shouruzm',
                query: {
                    id: row.id,
                    type: 'edit'
                }
            });
        },

        // 处理删除
        handleDelete(row) {
            MessageBox.confirm('确认删除该收入证明记录吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                try {
                    const response = await deleteIncomeCertificate(row.id);
                    if (response.data && response.data.code === 200) {
                        Message.success('删除成功');
                        this.getList();
                    } else {
                        Message.error(response.data.message || '删除失败');
                    }
                } catch (error) {
                    console.error('删除错误：', error);
                    Message.error('删除失败：' + error.message);
                }
            }).catch(() => {
                // 取消删除
            });
        },

        // 处理批量删除
        handleBatchDelete() {
            if (this.selectedIds.length === 0) {
                Message.warning('请选择要删除的记录');
                return;
            }

            MessageBox.confirm(`确认删除选中的 ${this.selectedIds.length} 条记录吗？`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                try {
                    const response = await batchDeleteIncomeCertificate(this.selectedIds);
                    if (response.data && response.data.code === 200) {
                        Message.success('批量删除成功');
                        this.getList();
                        this.selectedIds = [];
                    } else {
                        Message.error(response.data.message || '批量删除失败');
                    }
                } catch (error) {
                    console.error('批量删除错误：', error);
                    Message.error('批量删除失败：' + error.message);
                }
            }).catch(() => {
                // 取消删除
            });
        },

        // 处理选择变化
        handleSelectionChange(selection) {
            this.selectedIds = selection.map(item => item.id);
        },

        // 处理每页大小变化
        handleSizeChange(size) {
            this.queryParams.size = size;
            this.getList();
        },

        // 处理当前页变化
        handleCurrentChange(current) {
            this.queryParams.current = current;
            this.getList();
        }
    }
};
</script>

<style scoped>
.income-certificate-list {
    padding: 20px;

    width: 1200px;
    margin: 0 auto;
    height: calc(100vh - 40px);


}

.back-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #409EFF;
    font-size: 14px;
    margin-right: 20px;
    transition: all 0.3s;
}

.back-link i {
    margin-right: 5px;
}

.back-link :hover {
    opacity: 0.8;
}

.search-form {
    margin-bottom: 20px;
}

.pagination-container {
    margin-top: 20px;
    text-align: right;
}
</style>